<template>
  <div class="d-flex bg-white p-3">
    <div style="width: 400px">
      <div v-for="p of tableData" :key="p.url">
        {{ p.label }}
        <el-button class="d-print-none" type="text" @click="handleDownloadFile(p)">下载</el-button>
      </div>
    </div>
    <div class="flex-1">
      <div class="text-center pdf-content" v-loading="loading">
        <div ref="pdfCanvas"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import { renderPdf } from '@/common/plugins/tools/pdf'
// import { getPdf } from '@/credit/views/county/unionProvince/components/pdf'
import { exportUrl } from '@/common/api/download'
import { downloadByLink } from '@vimi/utils-tool'
export default {
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      tableData: [
        { label: '投标保函模板', url: 'https://attach.qedan.com/template/投标保函模板.pdf' },
        {
          label: '委托担保合同模板',
          url: 'https://attach.qedan.com/template/投标委托担保合同模板.pdf',
        },
      ],
      pdfCanvas: {},
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.pdfCanvas = this.$refs.pdfCanvas
    this.getTemplate()
  },
  methods: {
    async handleDownloadFile(data) {
      try {
        await exportUrl({ url: `${data.url}?${+new Date()}`, filename: data.label })
      } catch (error) {
        downloadByLink({ url: `${data.url}?${+new Date()}`, filename: data.label })
      }
    },
    getTemplate() {
      // this.$http
      //   .get('https://attach.qedan.com/template/投标保函模板.pdf', {
      //     responseType: 'blod',
      //   })
      //   .then(res => {
      //     console.log(res)
      //   })
    },
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  border: 1px solid $border-color;
  // width: 794px;
  margin: 0 auto;
}
.pdf-content {
  min-height: 200px;
  margin: 0 auto;
}
</style>
